<template>
  <view class="footprint-container">
    <!-- 自定义导航栏 -->
    <view class="custom-navbar">
      <view class="navbar-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
      </view>
      <view class="navbar-title">
        <text class="title-text">我的足迹</text>
      </view>
      <view class="navbar-right">
        <u-icon name="more-dot-fill" size="20" color="#333" @click="showMoreOptions"></u-icon>
        <u-icon name="minus" size="20" color="#333" @click="minimizeWindow"></u-icon>
        <u-icon name="checkmark-circle" size="20" color="#333" @click="completeSettings"></u-icon>
      </view>
    </view>

    <!-- 足迹列表内容 -->
    <view class="footprint-content">
      <!-- 时间分组标题 -->
      <view class="time-section">
        <text class="time-title">今天</text>
      </view>

      <!-- 商品列表 -->
      <view class="product-list">
        <view 
          class="product-item" 
          v-for="(product, index) in footprintList" 
          :key="product.id"
          @click="goToProductDetail(product)"
        >
          <!-- 商品图片 -->
          <view class="product-image">
            <image 
              :src="product.imageUrl" 
              mode="aspectFill"
              class="product-img"
            ></image>
          </view>

          <!-- 商品信息 -->
          <view class="product-info">
            <view class="product-name">{{ product.name }}</view>
            <view class="product-price">
              <text class="price-symbol">¥</text>
              <text class="price-value">{{ product.price }}</text>
            </view>
          </view>

          <!-- 删除足迹按钮 -->
          <view class="delete-btn" @click.stop="deleteFootprint(product)">
            <text class="delete-text">删除足迹</text>
          </view>
        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-if="footprintList.length === 0">
        <view class="empty-illustration">
          <image class="empty-image" src="/static/footprint/empty-address.svg" mode="aspectFit"></image>
        </view>
        <view class="empty-text">暂无浏览足迹</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FootprintList',
  data() {
    return {
      footprintList: [] // 足迹列表数据
    }
  },
  onLoad() {
    // 页面加载时获取足迹数据
    this.getFootprintList()
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    
    // 显示更多选项
    showMoreOptions() {
      uni.showActionSheet({
        itemList: ['清空足迹', '足迹设置', '帮助'],
        success: (res) => {
          console.log('选择了第' + (res.tapIndex + 1) + '个按钮')
          if (res.tapIndex === 0) {
            this.clearAllFootprints()
          }
        }
      })
    },
    
    // 最小化窗口
    minimizeWindow() {
      uni.showToast({
        title: '窗口已最小化',
        icon: 'none'
      })
    },
    
    // 完成设置
    completeSettings() {
      uni.showToast({
        title: '设置完成',
        icon: 'success'
      })
      setTimeout(() => {
        this.goBack()
      }, 1500)
    },
    
    // 获取足迹列表
    getFootprintList() {
      // 这里模拟获取足迹数据
      // 实际项目中应该调用API接口
      setTimeout(() => {
        // 模拟数据
        this.footprintList = [
          {
            id: 1,
            name: '独醒2023冬季新款香风毛呢外套长毛圆领大衣双排扣优雅小个子',
            price: '1000.00',
            imageUrl: '/static/images/products/coat-grey.jpg'
          },
          {
            id: 2,
            name: 'xiaol',
            price: '0.00',
            imageUrl: '/static/images/products/red-block.jpg'
          },
          {
            id: 3,
            name: '影新款刺绣九色眼部彩妆自然立体修饰眼影盘HOJO国货女学生',
            price: '0.01',
            imageUrl: '/static/images/products/lipstick-ysl.jpg'
          },
          {
            id: 4,
            name: '垒固溶剂过滤器夹子',
            price: '88.00',
            imageUrl: '/static/images/products/blue-clamp.jpg'
          },
          {
            id: 5,
            name: '腮蓝细腻丝滑元气单色腮红腮紫哑光自然微闪裸妆彩妆',
            price: '100.00',
            imageUrl: '/static/images/products/blue-compact.jpg'
          },
          {
            id: 6,
            name: '时尚DC女装夏款短袖T恤女丝光棉纯棉V领工恤欧美女壮壮士上衣工恤女 K10774',
            price: '59.00',
            imageUrl: '/static/images/products/white-tshirt.jpg'
          }
        ]
      }, 500)
    },
    
    // 跳转到商品详情
    goToProductDetail(product) {
      console.log('跳转到商品详情:', product)
      uni.navigateTo({
        url: `/pages/product/product-detail?id=${product.id}`
      })
    },
    
    // 删除足迹
    deleteFootprint(product) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个足迹吗？',
        success: (res) => {
          if (res.confirm) {
            console.log('删除足迹:', product)
            // 这里可以添加删除足迹的逻辑
            this.footprintList = this.footprintList.filter(item => item.id !== product.id)
            
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    },
    
    // 清空所有足迹
    clearAllFootprints() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有足迹吗？',
        success: (res) => {
          if (res.confirm) {
            console.log('清空所有足迹')
            this.footprintList = []
            
            uni.showToast({
              title: '清空成功',
              icon: 'success'
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.footprint-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f8f8;
}

.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  
  .navbar-left {
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  .navbar-title {
    .title-text {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
    }
  }
  
  .navbar-right {
    display: flex;
    align-items: center;
    gap: 20rpx;
  }
}

.footprint-content {
  flex: 1;
  overflow-y: auto;
}

.time-section {
  padding: 30rpx 30rpx 20rpx;
  background-color: #ffffff;
  
  .time-title {
    font-size: 32rpx;
    font-weight: 500;
    color: #333333;
  }
}

.product-list {
  background-color: #ffffff;
  
  .product-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .product-image {
      width: 160rpx;
      height: 160rpx;
      margin-right: 20rpx;
      border-radius: 12rpx;
      overflow: hidden;
      background-color: #f8f8f8;
      
      .product-img {
        width: 100%;
        height: 100%;
      }
    }
    
    .product-info {
      flex: 1;
      margin-right: 20rpx;
      
      .product-name {
        font-size: 28rpx;
        color: #333333;
        line-height: 1.4;
        margin-bottom: 20rpx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
      
      .product-price {
        display: flex;
        align-items: baseline;
        
        .price-symbol {
          font-size: 24rpx;
          color: #ff4444;
          margin-right: 4rpx;
        }
        
        .price-value {
          font-size: 32rpx;
          font-weight: 500;
          color: #ff4444;
        }
      }
    }
    
    .delete-btn {
      padding: 16rpx 24rpx;
      background-color: #f8f8f8;
      border-radius: 20rpx;
      border: 1rpx solid #e0e0e0;
      
      .delete-text {
        font-size: 24rpx;
        color: #666666;
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 100rpx 30rpx;
  
  .empty-illustration {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40rpx;
    
    .empty-image {
      width: 300rpx;
      height: 300rpx;
    }
  }
  
  .empty-text {
    font-size: 28rpx;
    color: #999999;
    text-align: center;
  }
}
</style> 